<div class="toolstrip-button" onclick="window.open('gridsa.html')"><img src="main-mid.png"></img></div>

<!-- Note: The below CSS gunk should not be necessary because the extension
system should apply it by default. There is a bug in the current dev
channel release that makes this happen unreliably though, so we need to
include it here to be sure. It is fixed on trunk and will be fixed in the
next dev release. -->
<style>
/**
 * Body styles. This makes the toolstrip layout fit in with the Windows
 * bookmarkbar. Note that the background is provided separately, by
 * RenderWidget.
 */
body {
  display:-webkit-box;
  -webkit-box-orient:horizontal;
  -webkit-box-align:stretch;
  white-space:nowrap;
  overflow: hidden;
  margin: 0;
  padding:0;
  font: menu;
  color: #062D75;
  text-shadow: #FFFFFF 1px 1px 0px;
  -webkit-user-select:none;
  cursor:default;
}

/**
 * Toolstrip Buttons. The following styles make
 * <div class="toolstrip-button"><img><span>Woot</span></div> look like the
 * bookmarkbar buttons on Windows.
 *
 * TODO(aa): We may have to come up with a way to modify these slightly on
 * different platforms.
 *
 * TODO(aa): It would be nice if we could use actual <button> tags work here,
 * which should work once https://bugs.webkit.org/show_bug.cgi?id=25406 is
 * fixed.
 */
div.toolstrip-button {
  display:-webkit-box;
  -webkit-box-orient:horizontal;
  -webkit-box-align:center;
  border:6px solid transparent;
  font:menu;
  background:transparent;
  color: #062D75;
  text-shadow: #FFFFFF 1px 1px 0px;
  line-height:100%;
  padding:0;
}

div.toolstrip-button>img {
  display:-webkit-box;
  width:16px;
  height:16px;
  /**
   * We inset the image slightly vertically, so that the button can be shorter
   * than would otherwise be possibe with our fat borders.
   */
  margin:-1px 5px -1px 0;
}

div.toolstrip-button>span {
  display:-webkit-box;
  margin-right:1px;
  /**
   * Hack: WebKit appears to measure text height slightly differently than we do
   * in native code, making us not line up when centering, so we shift ourselves
   * up one pixel to match.
   */
  margin-top:-1px;
}

/**
 * TODO(aa): It would be nice if these border images could be stored in Chrome
 * as, normal images even if those images are just translated into data URLs at
 * runtime.
 */
div.toolstrip-button:hover {
  border-width:6px;
  -webkit-border-image:url() 6 round round;
}

div.toolstrip-button:active {
  border-width:6px;
  -webkit-border-image:url() 6 round round;
}
</style>

